<template>
  <div class="home">
    <van-notice-bar left-icon="volume-o" :scrollable="false" text="根据双11的即将到来，欢迎各位老大前来品味，有优惠活动，新老
         会员都有优惠">
    </van-notice-bar>
    <!-- 头部 -->
    <div class="nav">
      <!-- 左边一个 -->
      <img src="../assets/images/icon-kfc.png" alt="" />
      <div class="time">下午好</div>
      <!-- 搜索框 -->
      <div class="search">
        <van-search placeholder="请输入搜索关键词" shape="round" />
      </div>
    </div>

    <div class="home-main">
      <!-- 轮播图 -->
      <div class="banner">
        <van-swipe
          class="my-swipe"
          :height="146"
          :autoplay="3000"
          indicator-color="white"
        >
          <van-swipe-item v-for="(item, index) in banner" :key="index">
            <!-- src 前面要加冒号  不然  src里面字是变成字符串  不是一个变量 -->
            <img :src="item.bannerImg" alt />
          </van-swipe-item>

        </van-swipe>
      </div>

      <!-- 热卖推荐 -->

      <div class="hot-buy">
        <div class="hot-text">热卖推荐</div>
      </div>

      <!-- 产品推荐 -->
      <div class="re-product">
        <!-- 循环遍历product -->
        <div class="item-product" v-for="(item, index) in product" :key="index"
        @click="viewDetail(item.pid)"
        >
          <!-- 组件 -->
          <Product :pro="item" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Product from "../components/Product.vue";
export default {
  name: "Home",
  components: {
    Product,
  },
  // 存放数据的位置
  data() {
    return {
      banner: [],
      // 装推荐产品
      product: [],
    };
  },

  // 生命周期函数  当页面加载的时候会自动触发他里面的代码  created 的时候  一般是用来请求数据
  created() {
    // 调用这个方法
    this.getBanner();
    this.getProduct();
  },

  // 方法
  methods: {
    // 请求轮播图
    getBanner() {
      this.axios({
        // 这里是没有s的  请求方式get  / post
        method: "get",
        // 请求地址
        url: "/bannar",
        // then 表示成功的时候执行   catch失败的时候执行
      })
        .then((res) => {
          this.banner = res.data.data.result;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //请求产品
    getProduct() {
      // 发起请求之前获取储存数据
      let cacheData = localStorage.getItem("cacheProduct");
      // 如果有缓存数据,就等于他本身,否则初始化一个空对象
      // 有数据,肯定是一个对象或者数组,要给他反序列化(JSON.parse)变成一个普通对象或数组
      cacheData = cacheData ? JSON.parse(cacheData) : {};
      // 判断是不是一个空对象 >0,就是有值，不需要发请求,如果是为空（没有储存）,发请求
      if (Object.keys(cacheData).length > 0) {
        console.log("已经缓存");
        // 赋值，直接缓存数据
        this.product = cacheData;
        // 终止代码不往下走，不发请求
        return;
      }
      console.log("发起请求");
      this.axios({
        // 这里是没有s的  请求方式get / post
        method: "get",
        // 请求地址
        url: "/product",
        // then 表示成功的时候执行   catch失败的时候执行
      })
        .then((res) => {
          console.log(res);
          this.product = res.data.data;

          cacheData = res.data.data;
          // 储存数据
          // 变成字符串存储（ JSON.stringify）
          localStorage.setItem("cacheProduct", JSON.stringify(cacheData));
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 点击跳转详情页
    viewDetail(pid){
      this.$router.push({name:'Detail', params:{pid}})
    }
  },
};
</script>

<style lang="less" scoped>
.item-product::before {
  content: "热卖";
  position: relative;
  padding: 5px;
  background-color: red;
  color: #fff;

  border-bottom-right-radius: 10px;
}
.nav img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 10px;
}
.nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
.home {
  padding-top: 54px;
  .nav {
    height: 50px;
    background: white;
    //弹性布局
    display: flex;
    // 只有两个时候两边对齐   超过两个,  中间会平分间距
    justify-content: space-between;
    // 子盒子  垂直居中
    align-items: center;
    // 超出隐藏
    overflow: hidden;

    .time {
      // 字体大小
      font-size: 14px;
      // 字体加粗
      font-weight: 580;
      margin-left: 10px;
    }
  }

  .home-main {
    // 一个参数的时候表示四个方向 内边距
    padding: 10px;
    .hot-buy {
      height: 50px;
      background: white;
      margin-top: 10px;
      // 解决内边距塌陷 超出隐藏
      overflow: hidden;
    }

    .hot-text {
      height: 40px;
      background: #e22731;
      width: 120px;
      // 字体大小
      font-size: 16px;
      color: white;
      margin-top: 5px;

      text-align: center;
      line-height: 40px;
      // 圆角边框 上  右 下 左  ;如果想四个方向一起变  那么就让他只有一个参数的时候
      border-radius: 0 10px 0 0;
    }

    // 推荐产品
    .re-product {
      // 产品盒子
      .item-product {
        // 注意减少  前后有空格  没有空格他不生效
        width: calc(50% - 5px); //多出10px 的间距
        height: 230px;
        background: white;
        // 浮动
        float: left;
        // 上边距
        margin-top: 10px;
        margin-right: 10px;
      }

      .item-product:nth-child(2n) {
        margin-right: 0;
      }
    }
  }

  // 轮播图
  .banner {
    img {
      width: 100%;
      height: 146px;
    }
  }

  .item-product:nth-last-child(1) {
    margin-bottom: 60px;
  }
}
</style>
